<template>
  <!--会签管理-我的提交列表-付款申请详情弹窗-表单-->
  <a-spin :spinning="confirmLoading">
    <j-form-container  class="scroll-view" style="height: 600px">
      <a-form-model  ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="审批编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="approvNumber" style="margin-bottom: 10px;">
              <a-input :disabled="disabled" v-model="model.approvNumber" placeholder="请输入介绍"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="提交时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="submitTime" style="margin-bottom: 10px;">
              <j-date v-model="model.submitTime" :showTime="true" date-format="YYYY-MM-DD" :disabled="disabled"
                style="width: 100%" placeholder="请选择提交时间"></j-date>
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="发起人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userName" style="margin-bottom: 10px;">
              <a-input :disabled="disabled" v-model="model.userName" placeholder="请输入发起人"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="职位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="post" style="margin-bottom: 10px;">
              <a-select :disabled="disabled" placeholder="请选择职位" v-model="model.post">
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="12">
            <a-form-item label="申请部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="depart" style="margin-bottom: 10px;">
              <a-input :disabled="disabled" placeholder="请选择部门" v-model="model.departName">
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status" style="margin-bottom: 10px;">
              <a-select :disabled="disabled" placeholder="请选择状态" v-model="model.status">
                <a-select-option value="0">未提交</a-select-option>
                <a-select-option value="1">审核中</a-select-option>
                <a-select-option value="2">已同意</a-select-option>
                <a-select-option value="3">已驳回</a-select-option>
                <a-select-option value="4">已撤销</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="title">
              <a-input :disabled="disabled" v-model="model.title" placeholder="请输入标题"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="对方名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="other">
              <a-input :disabled="disabled" v-model="model.other" placeholder="请输入对方名称"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectName">
              <a-select :disabled="disabled" :options="levelOneOptions" placeholder="请选择项目" v-model="model.projectName"> </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="银行账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankAccount">
              <a-input :disabled="disabled" v-model="model.bankAccount" placeholder=""></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
        
        <a-row>
         <a-col :span="12">
           <a-form-model-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bankDeposit">
             <a-input :disabled="disabled" v-model="model.bankDeposit" placeholder=""></a-input>
           </a-form-model-item>
         </a-col>
         <a-col :span="12">
           <a-form-model-item label="付款项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paymentProject">
             <a-input :disabled="disabled" v-model="model.paymentProject" placeholder=""></a-input>
           </a-form-model-item>
         </a-col>
        </a-row>
        
        <a-row>
         <a-col :span="12">
           <a-form-model-item label="付款金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="paymentMoney">
             <a-input :disabled="disabled" v-model="model.paymentMoney" placeholder=""></a-input>
           </a-form-model-item>
         </a-col>
         <a-col :span="12">
           <a-form-model-item label="合同编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contract">
             <a-input :disabled="disabled" v-model="model.contract" placeholder=""></a-input>
           </a-form-model-item>
         </a-col>
        </a-row>

         <a-row>
           <a-col :span="24">
             <a-form-model-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="remark" style="margin-bottom: 10px;margin-left: 20px;">
               <textarea :disabled="disabled" v-model="model.remark" cols="100" rows="3" style="width: 93%;"></textarea>
             </a-form-model-item>
           </a-col>
           <a-row>
         </a-row>
         
         <a-row>
           <a-col :span="24">
             <a-form-model-item label="附件资料" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="attachment" style="margin:0 60px 10px 20px;">
               <j-upload v-model="model.attachment" :disabled="disabled" :buttonVisible="!disabled"></j-upload>
             </a-form-model-item>
           </a-col>
           </a-row>
         </a-row>
                
         <a-row>
           <a-form-model-item label="审核流程" :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="remark"
             style="margin-bottom: 10px;margin-left: 20px;">
             <div style="display: flex;flex-direction: column;width: 100%;">
               <block v-for="(item, index) in list" :key="index">
                 <div style="display: flex;flex-direction: column;">
                   <div style="display: flex;align-items: center;">
                     <div style="width:60px;margin-right: 5px;">审批人{{index + 1 }} </div>
                     <div
                       style="border: 0.5px solid gray; width: 674px; padding: 0 5px;display: flex;align-items: center;"
                       :style="{background:((item.approver === approver)&&(item.status === '1')) && pageType ==='approve'?'#fff':'#f5f5f5'}">
                       {{ item.departName }} {{ item.realname }} 意见:<a-input
                         :disabled="((item.approver === approver)&&(item.status === '1')) && pageType ==='approve'?false:true "
                         v-model="item.feedback" placeholder=""
                         style="width: 500px;border: none;background: none;"></a-input></div>
                     <a-list placeholder="请选择状态" :data-source="list"
                       style="font-size: 16px; width: 80px; margin-left: 5px; display: inline-block">
                       <!-- <a-list-item v-if="item.status == '0'" style="color: blue">待审核</a-list-item> -->
                       <a-list-item v-if="item.status == '1'" style="color: blue">审核中</a-list-item>
                       <a-list-item v-if="item.status == '2'" style="color: green">已同意</a-list-item>
                       <a-list-item v-if="item.status == '3'" style="color: red">已驳回</a-list-item>
                       <a-list-item v-if="item.status == '4'" style="color: gray">已撤销</a-list-item>
                     </a-list>
                   </div>
                   <div style="margin-left: 65px;margin-bottom: 10px;width: 730px;">
                     <j-upload v-model="item.ideaAttachment"
                       :disabled="((item.approver === approver)&&(item.status === '1')) && pageType ==='approve'?false:true"
                       :buttonVisible="!(((item.approver === approver)&&(item.status === '1')) && pageType ==='approve'?false:true )"></j-upload>
                   </div>
                 </div>
               </block>
             </div>
           </a-form-model-item>
         </a-row>
      </a-form-model>
    </j-form-container>
    <!-- <a-button @click="chexiao" type="primary" style="color: white; margin-left: 650px;">撤销</a-button> -->
    <!-- <a-button @click="submitForm1" type="primary" style="color: white; margin-left: 650px;">重新提交</a-button> -->
    <j-modal
      class="modal-privacy"
      :title="title"
      :visible="visible1"
      :disableScreenClick="true"
      okText="确定"
      cancelText="取消"
      @cancel="cancelPrivacy"
      @ok="confirmPrivacy"
    >
      <textarea cols="70" rows="5" placeholder="请输入撤销原因"></textarea>
    </j-modal>
    <wt-shishi-modal ref="modalForm"></wt-shishi-modal>
  </a-spin>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import WtShishiModal from './WtShishiModal'

export default {
  name: 'WtBrandForm',
  components: { WtShishiModal },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      title: '撤销原因',
      model: {
        title: '',
        other: '',
        bankAccount: '',
        bankDeposit: '',
        paymentProject: '',
        paymentMoney: '',
        contract: '',
        remark: '',
        attachment: '',
        approvNumber: '',
        submitTime: '',
        status: '',
        projectName: '',
        userName: '',
        post: '',
      },
      visible1: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      departId: '',
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelCol2: {
        xs: {
          span: 24
        },
        sm: {
          span: 2
        },
      },
      wrapperCol2: {
        xs: {
          span: 24
        },
        sm: {
          span: 22
        },
      },
      confirmLoading: false,
      validatorRules: {},
      levelOneOptions: [],
      levelTwoOptions: [],
      id: '',
      treeData: [],
      treeData1: [],
      treeData2: [],
      treeData3: [],

      list: [],
      fileList: [],
      queryParam: {
        countersignId: this.id,
      },
      url: {
        list: '/countersign/wtCountersignPaymentRequest/queryByCountersignId',
        add: '/wtBrand/add',
        edit: '/wtBrand/edit',
        queryById: '/wtBrand/queryById',
      },
      approver:'',
      pageType:'',
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
    if(!!window.localStorage.getItem("pro__Login_Userinfo")){
      let userInfo = JSON.parse(window.localStorage.getItem("pro__Login_Userinfo")).value;
      this.approver = userInfo.id;
    }
    // this.loadTree()
    // /countersign/wtCountersignPaymentRequest/queryByCountersignId

  },
  methods: {
    edit(record,type) {
      if(!!type){
        this.pageType = type;
      }
      // this.departId = record.departId
      this.visible = true
      // console.log('ewq',this.model.post);
      this.loadTree(record)
      // console.log('dsaw', this.departId)
      this.id = record.id
    },

    loadTree(record) {
      // var that = this

      getAction(`/countersign/wtCountersignPaymentRequest/queryByCountersignId?countersignId=${record.id}`).then(
        (res) => {
          if (res.success) {
            this.treeData1 = res.result

            this.model = this.treeData1
            this.treeData3 = res.result.list
            this.list = this.treeData3
            // console.log('dwaq1', this.model);

            // that.model.id=that.treeData[0].id
          }
        }
      )

    },
    confirmPrivacy() {
      // console.log('同意了用户协议')
      // console.log(this.privacyDialogShow)l
      this.visible1 = false
      // console.log(this.privacyDialogShow)
    },
    cancelPrivacy() {
      // console.log('拒绝了用户协议')
      this.visible1 = false
    },
    submitForm1: function (record) {
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '新增'
      // this.$refs.modalForm.disableSubmit = true;
    },

    add() {
      this.edit(this.modelDefault)
    },

    // chexiao() {
    //   this.visible1 = true
    // },
    // submitForm() {
    //   const that = this
    //   // 触发表单验证
    //   this.$refs.form.validate((valid) => {
    //     if (valid) {
    //       that.confirmLoading = true
    //       let httpurl = ''
    //       let method = ''
    //       if (!this.model.id) {
    //         httpurl += this.url.add
    //         method = 'post'
    //       } else {
    //         httpurl += this.url.edit
    //         method = 'put'
    //       }
    //       httpAction(httpurl, this.model, method)
    //         .then((res) => {
    //           if (res.success) {
    //             that.$message.success(res.message)
    //             that.$emit('ok')
    //           } else {
    //             that.$message.warning(res.message)
    //           }
    //         })
    //         .finally(() => {
    //           that.confirmLoading = false
    //         })
    //     }
    //   })
    // },
  },
}
</script>
  <style scoped>
.scroll-view {
  overflow: auto;
  overflow-y: scroll;
}
</style>